<template>
	<el-form
		ref="controlMapRuleFormRef"
		:model="mapRuleForm"
		:rules="mapRuleFormRules"
		size="small"
		label-width="120px">
		<el-form-item label="原始设备类别" prop="sourceDeviceType" class="width-50">
			<el-select v-model="mapRuleForm.sourceDeviceType"
			           filterable placeholder="请选择原始设备类别"
			           class="width-100" @change="sourceDeviceTypeChange">
				<el-option
					v-for="deviceType in deviceTypeData" :key="deviceType._id"
					:label="deviceType.label" :value="deviceType._id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="原始属性" prop="sourceProp" class="width-50">
			<el-input v-model="mapRuleForm.sourceProp" placeholder="请填写原始属性名称"></el-input>
		</el-form-item>
		<el-form-item label="映射方式" prop="paramMapType">
			<el-radio-group v-model="mapRuleForm.paramMapType">
				<el-radio
					v-for="(mapWay, idx) in commonConfig.commandMapWay" :key="idx"
					:label="mapWay.value">{{mapWay.label}}</el-radio>
			</el-radio-group>
		</el-form-item>
		<div v-if="[0, 2].includes(mapRuleForm.paramMapType)">
			<el-form-item label="目标设备类别" prop="targetDeviceType" class="width-50">
				<el-select
					v-model="mapRuleForm.targetDeviceType"
					filterable placeholder="请选择目标设备类别"
					class="width-100" @change="getGenCommandData">
					<el-option
						v-for="deviceType in deviceTypeData" :key="deviceType._id"
						:label="deviceType.label" :value="deviceType._id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="通用方法" prop="generalCommand" class="width-50">
				<el-select v-model="mapRuleForm.generalCommand" clearable filterable
				           class="width-100" placeholder="请选择通用命令">
					<el-option-group v-for="(group, idx) in genCommandGroupData" :key="idx" :label="group.label">
						<el-option v-for="(opt, idx) in group.options" :key="idx"
						           :label="`${opt.methodName} ${opt.methodAlias || ''}`" :value="opt._id">
							<span>{{opt.methodName}}</span>
							<span class="mar-lft font-color-warning">{{opt.methodAlias || ''}}</span>
						</el-option>
					</el-option-group>
				</el-select>
			</el-form-item>
			<el-form-item label="目标属性" prop="targetProp" class="width-50">
				<el-select
					v-model="mapRuleForm.targetProp"
					placeholder="请选择目标属性名称" class="width-100">
					<el-option
						v-for="param in ctrlParamOptions" :key="param.paramKey"
						:label="`${param.paramKey} ${param.paramAlias}`" :value="param.paramKey">
						<span>{{param.paramKey}}</span>
						<span class="mar-lft-10 font-color-warning">{{param.paramAlias}}</span>
					</el-option>
				</el-select>
			</el-form-item>
		</div>
		<el-form-item
			v-if="mapRuleForm.paramMapType === 2"
			prop="field" label="取值范围" class="width-50">
			<el-row>
				<el-col :span="11">
					<el-row>
						<el-col :span="12" class="pad-rgt-5">
							<el-input-number
								v-model="mapRuleForm.paramFieldMap.preMin"
								controls-position="right" class="width-100" />
						</el-col>
						<el-col :span="12" class="pad-rgt-5">
							<el-input-number
								v-model="mapRuleForm.paramFieldMap.preMax"
								controls-position="right" class="width-100" />
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="2" class="text-align-center pad-rgt-5">=></el-col>
				<el-col :span="11">
					<el-row>
						<el-col :span="12" class="pad-rgt-5">
							<el-input-number
								v-model="mapRuleForm.paramFieldMap.postMin"
								controls-position="right" class="width-100" />
						</el-col>
						<el-col :span="12">
							<el-input-number
								v-model="mapRuleForm.paramFieldMap.postMax"
								controls-position="right" class="width-100" />
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item
			v-if="mapRuleForm.paramMapType === 1"
			prop="paramEnumMap" label="枚举映射">
			<ParamEnumMapList
				:device-type-data="deviceTypeData"
				:enum-map-list="mapRuleForm.paramEnumMap"
				:source-device-type="mapRuleForm.sourceDeviceType"></ParamEnumMapList>
		</el-form-item>
	</el-form>
</template>

<script>
	import ParamEnumMapList from "@/page/thirdPartyPlatform/partial/ParamEnumMapList.vue";
	import {commonConfig} from "@/config/common";
	import {commonString, msgCode} from "@/config/string";
	import {messageHandle} from "@/utils";

	export default {
		name: "ControlMapRule",
		components: {
			ParamEnumMapList
		},
		props: {
			deviceTypeData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			mapRuleForm: {
				type: Object,
				default: () => {
					return {
						mapRuleType: 'control',
						sourceDeviceType: '',
						sourceProp: '',
						paramMapType: commonConfig.commandMapWay[1].value,
						targetDeviceType: '',
						generalCommand: '',
						targetProp: '',
						paramEnumMap: [],
						paramFieldMap: {
							preMin: 0,
							preMax: 100,
							postMin: 0,
							postMax: 100,
						},
						remarks: '',
					};
				}
			}
		},
		data() {
		  return {
			  commonConfig: commonConfig,
			  mapRuleFormRules: {
				  mapRuleType: [{required: true, message: '请选择映射规则类型', trigger: 'change'}],
				  sourceDeviceType: [{required: true, message: '请选择原始设备类别', trigger: 'change'}],
				  sourceProp: [{required: true, message: '请填写属性名', trigger: 'blur'}],
				  paramMapType: [{required: true, message: '请选择映射类型', trigger: 'change'}],
			  },
			  genCommandSrcData: [],
			  genCommandGroupData: [],
		  };
		},
		computed: {
			ctrlParamOptions() {
				const genCommand = this.genCommandSrcData.find(gc => {
					return gc._id === this.mapRuleForm.generalCommand;
				}) || {};
				const {controlParams = []} = genCommand;
				return controlParams;
			},
		},
		created() {
			this.getGenCommandData();
		},
		methods: {
			getGenCommandData() {
				if (!this.mapRuleForm.targetDeviceType) return;
				const param = {deviceType: this.mapRuleForm.targetDeviceType};
				API.genCommand.genCommAll(param).then(result => {
					const {data = []} = result;
					this.genCommandSrcData = data;
					this.genCommandGroupData = [];
					// 将通用命令根据命令类型分组
					const initGenCommData = commonConfig.commandType.map(ct => {
						return {...ct, options: []};
					});
					data.forEach(d => {
						const genComm = initGenCommData.find(f => {
							return f.value === d.generalCommandType;
						});
						genComm && (genComm.options.push(d));
					});
					initGenCommData.forEach(gc => {
						const {options = []} = gc;
						options.length && (this.genCommandGroupData.push(gc));
					});
				}).catch(err => {
				});
			},
			sourceDeviceTypeChange(deviceType = '') {
				this.mapRuleForm.targetDeviceType = deviceType;
			},
			formValidate() {
				return new Promise(resolve => {
					this.$refs['controlMapRuleFormRef'].validate(valid => {
						resolve(valid);
					});
				});
			}
		},
	}
</script>

<style scoped lang="less">

</style>